<template>
  <div>
    <el-table :key="tableKey" v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%;">
      <el-table-column label="ID" prop="id" align="center">
        <template slot-scope="{row}">
          <span>{{ row.order_id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="订单号码" align="center">
        <template slot-scope="{row}">
          <span>{{ row.order_sn }}</span>
        </template>
      </el-table-column>

      <el-table-column label="商户名称" align="center">
        <template slot-scope="{row}">
          <span>{{ row.merchant_name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="服务项目" align="center">
        <template slot-scope="{row}">
          <span>{{ row.project_name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="首付比率" align="center">
        <template slot-scope="{row}">
          <span>{{ row.factoring_rate*100 }}%</span>
        </template>
      </el-table-column>
      <el-table-column label="债权总额" align="center">
        <template slot-scope="{row}">
          <span>{{ row.total_money }}</span>
        </template>
      </el-table-column>
      <el-table-column label="应付首款" align="center">
        <template slot-scope="{row}">
          <span>{{ row.total_money*row.factoring_rate }}</span>
        </template>
      </el-table-column>
      <el-table-column label="首款支付状态" align="center">
        <template slot-scope="{row}">
          <span v-if="row.is_paid==1">已支付</span>
          <span v-else>未支付</span>
        </template>
      </el-table-column>
      <el-table-column label="订单状态" align="center">
        <template slot-scope="{row}">
          <span>{{ row.order_status_name }}</span>
        </template>
      </el-table-column>

      <el-table-column label="创建时间" class-name="status-col">
        <template slot-scope="{row}">

          {{ row.create_time|formatDate }}

        </template>
      </el-table-column>
      <el-table-column label="更新时间" class-name="status-col">
        <template slot-scope="{row}">
          {{ row.update_time|formatDate }}
        </template>
      </el-table-column>
      <el-table-column label="负责人" class-name="status-col">
        <template slot-scope="{row}">
          {{ row.sale_name }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">
        <template slot-scope="{row,$index}">
          <el-button type="primary" size="mini" @click="handleRecord(row.order_id)">
            订单记录
          </el-button>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>

<script>
import {
  fetchAllListByDay,
  fetchOrderRecordListByOrderId
} from '@/api/order'
import { formatDate } from '@/utils/formatDate.js'
import waves from '@/directive/waves' // waves directive
import {
  parseTime
} from '@/utils'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
export default {
  name: 'ComplexTable',
  components: {
    Pagination
  },
  directives: {
    waves
  },
  filters: {
   	formatDate(time) {
   	        time = time * 1000
   	        const date = new Date(time)

   	        return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
   	      }
  },
  data() {
    return {
      tableKey: 0,
      tableRecord: 1,
      list: null,
      record_list: null,
      listRecordLoading: true,
      recordTotal: 0,
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20,
        real_name: '',
        mobile: '',
        idcard: '',
        customer_id: '',
        merchant_id: '',
        sale_id: '',
        day: '',
        is_first: '',
        order_status: '0'
      },
      listRecordQuery: {
        page: 1,
        limit: 20,
        order_id: ''
      },
      textMap: {
        record: '订单记录',
        create: 'Create'
      },
      merchant_list: [],
      sale_list: [],
      dialogRecordVisible: false,
      dialogStatus: '',
      downloadLoading: false
    }
  },
  created() {
    this.listQuery.day = this.$route.params.day,
    this.listQuery.is_first = this.$route.params.is_first
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      fetchAllListByDay(this.listQuery).then(response => {
        this.list = response.data.data.list
        this.total = response.data.data.count
        this.merchant_list = response.data.sale_merchant.merchant
        this.sale_list = response.data.sale_merchant.sale
        setTimeout(() => {
          this.listLoading = false
        }, 0.1 * 1000)
      })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },

    getRecordList() {
      this.listRecordLoading = true
      fetchOrderRecordListByOrderId(this.listRecordQuery).then(response => {
        this.record_list = response.data.list
        this.recordTotal = response.data.count
        setTimeout(() => {
          this.listRecordLoading = false
        }, 1.0 * 1000)
      })
    },
    handleRecord(order_id) {
      console.log(order_id)
      this.dialogStatus = 'record'
      this.dialogRecordVisible = true
      this.listRecordQuery.order_id = order_id
      fetchOrderRecordListByOrderId(this.listRecordQuery).then(res => {
        this.record_list = res.data.list
        this.recordTotal = res.data.count
        setTimeout(() => {
          this.listRecordLoading = false
        }, 1.0 * 1000)
      })
    }

  }
}
</script>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
    float: left;
  }
</style>
